<template>
  <div class="panel">
    <div class="panel-top">
      <div class="panel-top-title">
        {{tag}}: <span class="panel-top-title__num">26家</span>
      </div>
      <div class="panel-top-condition">
        <div class="panel-top-condition-item"
             :class="{actived: currKey === item.value}"
             v-for="(item, index) in conditions"
             :key="index" @click="onConditionClick(item)">
          {{item.label}}
          <i class="icon el-icon-arrow-down"></i>
        </div>

        <div class="panel-top-condition-children" v-if="childrenShow">
          <div class="children-item"
               v-for="(child, i) in currChildren"
               :class="{selected: params[currKey] && params[currKey].includes(child.label)}"
               :key="i + '_' + child.label" @click="onChildrenClick(child)">
            {{child.label}}
          </div>
        </div>
      </div>
    </div>
    <div class="panel-main">
      <div class="company-item" v-for="(item, index) in list" :key="index">
        <div class="company-item-index">{{ index + 1 }}</div>
        <div class="company-item-main">
          <slot name="item" :item="item" :$index="index">

          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'result-company',
  cnName: '企业搜索结果',
  props: {
    tag: String
  },
  data() {
    return {
      conditions: [
        {label: '地区', value: 'area', children: [
            {label: '华苑片区(环内）'},
            {label: '华苑片区(环外）'},
            {label: '渤龙湖片区'},
            {label: '海洋科技园片区'},
            {label: '京津示范区'}
          ]},
        {label: '性质', value: 'type', children: [
            {label: '国有企业'},
            {label: '集体企业'},
            {label: '私营企业'},
            {label: '外资企业'}
          ]
        },
        {label: '规模', value: 'scale', children: [
            {label: '大型'},
            {label: '中型'},
            {label: '小型'}
          ]
        }
      ],
      childrenShow: false,
      currKey: '',
      currChildren: [],
      params: {
        area: [],
        type: [],
        scale: []
      },
      list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
    }
  },
  methods: {
    onConditionClick(item) {
      if(item.value === this.currKey) {
        this.currKey = ''
        this.currChildren = []
        this.childrenShow = false
        return
      }

      const currKey = item.value

      if(!this.params[currKey]) {
        this.params[currKey] = []
      }
      this.currKey = currKey
      this.currChildren = item.children
      this.childrenShow = true
    },
    onChildrenClick(child) {
      const index = this.params[this.currKey].indexOf(child.label)
      if(index !== -1) {
        this.params[this.currKey].splice(index, 1)
      } else {
        this.params[this.currKey].push(child.label)
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
@import "./result";
</style>
